import {Input} from "antd";
import {ChangeEvent, useEffect, useState} from "react";
import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
import {LIST_SEARCH_PARAM_KEY} from "../constant";

const {Search} = Input;

export const ListSearch = () => {
    const nav = useNavigate()
    const {pathname} = useLocation()
    const [value, setValue] = useState('');

    const [searchParams] = useSearchParams()
    useEffect(() => {
        const curVal = searchParams.get(LIST_SEARCH_PARAM_KEY) || ''
        setValue(curVal)
    }, [searchParams])

    function handleChange(event: ChangeEvent<HTMLInputElement>) {
        setValue(event.target.value);
    };
    const handleSearch = (value: string) => {
        nav({
            pathname,
            search: `${LIST_SEARCH_PARAM_KEY}=${value}`
        })
    };
    return (
        <Search size={'large'} allowClear placeholder={'请输入关键字'} onChange={handleChange} value={value}
                onSearch={handleSearch}
                style={{width: 260}}></Search>
    );
};